import { Pressable, StyleSheet, Text, View, FlatList } from 'react-native';
import React, { useState, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import FastImage from '@d11/react-native-fast-image';
import { useRoute } from '@react-navigation/native';
import { NavBarHeader, ContentStatus } from '~/components';
import { px2dp, scale } from '~/utils/px2dp';
import { formatTimestamp } from '~/utils/formatDate';
import { messageListApi, readMessageByIdApi, allReadMessageApi } from '~/api/message';

export default function MessageScreen() {
    const router: any = useRoute();
    const { type = '3,4,5' } = router.params || {};
    const { t } = useTranslation();
    const [listData, setListData] = useState([]);
    const getData = () => {
        messageListApi({ type }).then((res) => {
            setListData(res.data);
        });
    };
    const readMessage = (id) => {
        readMessageByIdApi({ id }).then((res) => {
            getData();
        });
    };
    const renderItem = ({ item, index }) => {
        return (
            <Pressable style={styles.listItem} onPress={() => readMessage(item.id)}>
                <View style={[styles.row, styles.between]}>
                    <View style={[styles.row]}>
                        <FastImage
                            style={styles.icons}
                            source={{
                                uri:
                                    item.type == 3
                                        ? 'https://bjy-crmeb.oss-cn-shenzhen.aliyuncs.com/attach/2025/03/86e94202503121618162498.png'
                                        : item.type == 4
                                        ? 'https://bjy-crmeb.oss-cn-shenzhen.aliyuncs.com/attach/2025/03/e8b46202503121618152548.png'
                                        : 'https://bjy-crmeb.oss-cn-shenzhen.aliyuncs.com/attach/2025/03/a4f1d202503121618164926.png',

                                priority: FastImage.priority.high,
                            }}
                            resizeMode={FastImage.resizeMode.contain}
                        />
                        <Text style={styles.cardTitle}>
                            {item.type == 3 ? t('message.t2') : item.type == 4 ? t('message.t3') : t('message.t4')}
                        </Text>
                    </View>
                    <Text style={styles.time}>{formatTimestamp(item.createTime, 1)}</Text>
                </View>
                <View style={styles.line}></View>
                <View style={[styles.row]}>
                    {item.status == 1 && <View style={styles.border}></View>}
                    <Text style={styles.title}>{item.title}</Text>
                </View>
                <Text style={styles.conetent}>{item.content}</Text>
            </Pressable>
        );
    };
    const allReadMessage = () => {
        allReadMessageApi().then((res) => {
            getData();
        });
    };
    useEffect(() => {
        getData();
    }, []);
    return (
        <View style={styles.container}>
            <NavBarHeader
                title={type == '5' ? t('message.t4') : t('message.title')}
                rightComponent={
                    <Pressable style={styles.right} onPress={allReadMessage}>
                        <Text style={styles.rightTitle}>{t('message.t1')}</Text>
                    </Pressable>
                }
            />
            <FlatList
                contentContainerStyle={styles.contentContainerStyle}
                showsVerticalScrollIndicator={false}
                data={listData}
                keyExtractor={(item: any) => item.id}
                renderItem={renderItem}
                ListEmptyComponent={<ContentStatus status="empty" />}
            />
        </View>
    );
}

const styles = StyleSheet.create({
    row: {
        flexDirection: 'row',
        alignItems: 'center',
    },
    between: {
        justifyContent: 'space-between',
    },
    container: {
        flex: 1,
    },
    right: {
        marginRight: px2dp(32),
    },
    rightTitle: {
        color: '#A4A4A4',
        fontSize: scale(24),
    },
    contentContainerStyle: {
        flexGrow: 1,
        paddingBottom: '20%',
    },
    listItem: {
        backgroundColor: '#fff',
        padding: px2dp(24),
        marginTop: px2dp(24),
        marginHorizontal: px2dp(24),
        borderRadius: px2dp(22),
    },
    icons: {
        width: px2dp(32),
        height: px2dp(32),
        marginRight: px2dp(4),
    },
    cardTitle: {
        color: '#111111',
        fontSize: scale(24),
    },
    line: {
        width: '100%',
        backgroundColor: '#E8E8E8',
        height: px2dp(1),
        marginVertical: px2dp(24),
    },
    title: {
        color: '#111111',
        fontSize: scale(28),
        fontWeight: 'bold',
    },
    conetent: {
        color: '#666666',
        marginTop: px2dp(24),
        fontSize: scale(24),
        lineHeight: px2dp(34),
    },
    time: {
        color: '#666666',
        fontSize: scale(24),
    },
    border: {
        width: px2dp(10),
        height: px2dp(10),
        borderRadius: px2dp(10),
        backgroundColor: 'red',
        marginRight: px2dp(12),
    },
});
